<template>
  <div class="max-w-2xl mx-auto">
    <div class="text-center mb-8 pb-4 border-b border-gray-200">
      <h3 class="text-xl font-semibold text-gray-800">会员充值</h3>
    </div>

    <el-form
      :model="rechargeForm"
      label-width="80px"
      class="bg-gray-50 p-6 rounded-lg mb-5"
    >
      <div class="mb-6">
        <h4
          class="flex items-center text-base font-medium text-white bg-blue-500 px-3 py-2 rounded mb-5"
        >
          充值信息
        </h4>

        <div class="space-y-5">
          <el-form-item label="会员卡：" required>
            <el-input
              v-model="rechargeForm.cardNumber"
              placeholder="请输入会员卡号或手机号"
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="姓名：">
            <el-input
              v-model="rechargeForm.name"
              placeholder="自动获取"
              readonly
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="当前余额：">
            <el-input
              v-model="rechargeForm.currentBalance"
              placeholder="0.00"
              readonly
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="充值金额：" required>
            <el-input
              v-model="rechargeForm.amount"
              placeholder="请输入充值金额"
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="支付方式：">
            <el-radio-group v-model="rechargeForm.paymentMethod">
              <el-radio label="现金">现金</el-radio>
              <el-radio label="微信">微信</el-radio>
              <el-radio label="支付宝">支付宝</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备注：">
            <el-input
              v-model="rechargeForm.remark"
              type="textarea"
              placeholder="请输入备注"
              class="w-80"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div class="text-center py-5">
      <el-button class="mx-3 px-8 py-2">取消</el-button>
      <el-button type="primary" class="mx-3 px-8 py-2">确认充值</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 充值表单
const rechargeForm = ref({
  cardNumber: "",
  name: "",
  currentBalance: "0.00",
  amount: "",
  paymentMethod: "现金",
  remark: ""
});
</script>
